<template>
    <div class="bg-move" :style="{width: width,
        height: height,
        left: left,
        right: right,
        top: top,
        bottom: bottom,
        animationDuration: duration + 's',
       }">
  </div>
</template>
<script>
export default {
  name: "bg-move",
  props: {
    width: {
      default: "50px"
    },
    height: {
      default: "50px"
    },
    left: {
      default: "inherit"
    },
    right: {
      default: "inherit"
    },
    top: {
      default: "inherit"
    },
    bottom: {
      default: "inherit"
    },
    duration: {
      type: Number,
      default: 2
    }
  }
};
</script>
<style lang='scss' scoped>
.bg-move {
  background-size: 100% 100%;
  position: absolute;
  animation: move 5s linear infinite alternate;
  z-index: -1;
  overflow: hidden;
}
@keyframes move {
  0% {
    transform: translatex(0) translatey(0);
  }
  30% {
    transform: translatex(60px) translatey(20px);
  }
  70% {
    transform: translatex(100px) translatey(80px);
  }
  100% {
    transform: translatex(0) translatey(0);
  }
}
</style>
